<template>
  <div class="quartar-component">
    <div class="mark" v-show="showSeason" @click.stop="showSeason = false"></div>
    <el-input placeholder="请选择季度" suffix-icon="el-icon-date" v-model="showValue" style="width: 200px;" @focus="showSeasonPanel"></el-input>
    <el-card class="box-card" v-show="showSeason">
      <div slot="header" class="header">
        <i class="el-icon-d-arrow-left" @click="prev"></i>
        <span>{{year}}年</span>
        <i class="el-icon-d-arrow-right" @click="next"></i>
      </div>
      <div class="item">
        <el-button type="text" :class="{'active' : curYear===year && season===item}" @click="selectSeason(item)" v-for="item in 4" :key="item">第{{item}}季度</el-button>
      </div>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      showSeason: false,
      season: parseInt(new Date().getMonth()/3)+1,
      year: new Date().getFullYear(),
      curYear: new Date().getFullYear(),
    };
  },
  computed: {
    showValue() {
      return `${this.curYear}年第${this.season}季度`
    },
  },
  mounted() {
    this.$emit('postPeriod', this.curYear, this.season)
  },
  methods: {
    prev() {
      this.year = this.year * 1 - 1;
    },
    next() {
      this.year = this.year * 1 + 1;
    },
    showSeasonPanel() {
      this.year = this.curYear;
      this.showSeason = true;
    },
    selectSeason(i) {
      this.season = i;
      this.curYear = this.year;
      this.showSeason = false;
      this.$emit('postPeriod', this.curYear, this.season)
    },
  },
};
</script>
<style lang='scss' scoped>
.quartar-component {
  .mark {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0);
    z-index: 99;
  }
  .box-card {
    width: 200px;
    margin-top: 5px;
    position: fixed;
    z-index: 99;
    .header {
      display: flex;
      justify-content: space-between;
      i {
        cursor: pointer;
        &:hover {
          color: #409EFF;
        }
      }
    }
    .item {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      .el-button {
        width: 50%;
        margin: 0;
        color: #606266;
        &:hover {
          color: #409EFF;
          text-decoration: underline;
        }
      }
      .active {
        color: #409EFF;
        font-size: bold;
      }
    }
  }
}
</style>